<template>
	<view class="root">
		<view class="box">
			<!-- 优惠值 -->
			<view class="left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="time">2020.04.11至2020.05.11</view>
					<view class="receive">领取</view>
				</view>
			</view>
		</view>
		<view class="box">
			<!-- 优惠值 -->
			<view class="left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="time">2020.04.11至2020.05.11</view>
					<view class="receive">领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style>
/* 根标签 */
 .root {
	 background-color: #FFFFFF;
	 width: 100vw;
	 height: 100vh;
	 padding-top: 10px;
	 padding-left: 15px;
	 padding-right: 15px;
 }   
 
 /* 每条优惠券 */
 .box {
	 background-color: #F8F8F8;
	 border-radius: 5px;
	 display: flex;
	 align-items: center;
	 /* height: 100px; */
	 padding: 15px 0;
	 box-sizing: border-box;
	 margin-bottom: 15px;
 }
 /* 左边优惠值 */
 .left {
	 background-color: #1D6FFF;
	 height: 94px;
	 width: 115px;
	 border-radius: 10px;
	 color: white;
	 border: 2px solid #BBBBBB;
 }
 /* 价格 */
 .value {
	 /* background-color: deepskyblue; */
	 width: 100%;
	 display: flex;
	 height: 65%;
	 padding-top: 20px;
	 margin-left: 25px;
 }
 /* 人民币符号 */
 .sign {
	 /* background-color: antiquewhite; */
	 font-size: 16px;
	 line-height: 40px;
 }
 /* .面值 */
 .number {
	 /* background-color: beige; */
	 font-size: 36px;
 }
 /* 优惠券满减 */
 .condition {
	 /* background-color: bisque; */
	 width: 100%;
	 height: 35%;
	 text-align: center;
	 font-size: 14px;
	 line-height: 30px;
 }
 /* 优惠券介绍 */
 .right {
	 /* background-color: pink; */
	 display: flex;
	 flex: 1;
	 height: 75px;
	 margin-left: 10px;
	 box-sizing: border-box;
	 border-left: 1px dotted #BBBBBB ;
	 padding-left: 10px;
	 display: block;
 }
 /* 使用方法 */
 .use {
	 /* background-color: beige; */
	 font-size: 14px;
	 height: 40px;
	 line-height: 40px;
 }
 /* 使用时间和领取按钮 */
 .bottom {
	 /* background-color: palegreen; */
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
 }
 /* 时间 */
 .time {
	 /* background-color: pink; */
	 height: 40px;
	 font-size: 12px;
	 color: red;
	 line-height: 40px;
 }
 /* 领取按钮 */
 .receive {
	 background-color: plum;
	 height: 30px;
	 width: 80px;
	 color: white;
	 line-height: 30px;
	 text-align: center;
	 background-color: #0084FF;
	 border-radius: 5px;
 }
 
</style>
